﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="KPICurrent.aspx.cs" Inherits="FBKPI.Pages.KPICurrent" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">
    var oTable;
    var oFC;
    $(document).ready(function () {
        mainmenu("#nav ul", "#nav li");
        mainmenu("#menu_wrap ul", "#menu_wrap li");

        $("#movement").hide();

        $("#EmployeeTable").dataTable({
            "oLanguage": {
                "sZeroRecords": "No records to display",
                "sSearch": "Search"
            },
            "bSort": true,
            "bPaginate": true,
            "bAutoWidth": false,
            "bDestroy": true,
            "bProcessing": true,
            "bServerSide": true,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
                    "bDeferRender": true,
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": "../Serializer/EmployeeBySuperiorIDSerializer.ashx?User=" + $("#txt_user").val(),
                    "data": aoData,
                    "success": fnCallback
                });
            },

            

            "aoColumns": [
             {
                "mData": "ID", "sWidth": "5%"
            },{
                "mData": "No", "sWidth": "3%"
            }, {
                "mData": "EmployeeName"
            }, {
                "mData": "SubBranch"
            }, {
                "mData": "Department"
            }, {
                "mData": "Section"
            }, {
                "mData": "SubSection"
            }, {
                "mData": "JobPosition"
            }, {
                "mData": "JobTitle"
            }, {
                "mData": "isActive", "sWidth": "5%"
            }],
            "aoColumnDefs": [{
                "fnRender": function (oObj) {
                    if (oObj.aData["isActive"] == 'True') {
                        return "<img src='../images/check.png' />"
                    } else {
                        return "<img src='../images/cross.png' />"
                    }
                },
                "aTargets": [9]
            }
            
            , {
                "fnRender": function (oObj) {
                    return "<a  onclick=\"DrawKPITable('" + oObj.aData["ID"] + "')\"><img src='../images/detail.png' /></a>";
                },
                "aTargets": [0]
            }
            
             , {
                "fnRender": function (oObj) {
                    return "<a  onclick=\"DrawKPITable('" + oObj.aData["ID2"] + "')\">"+oObj.aData["EmployeeName"]+"</a>";
                },
                "aTargets": [2]
            }
           
            ,
             {
                 "bVisible": false,
                 "aTargets": [5,6,8]
             },
             {
                "sClass": "center",
                "aTargets": [0,1, 8, 9]
            }]
        });

         //mark selected row
        $('body').on("click", '#EmployeeTable tbody tr', function () {
            $('#EmployeeTable tbody tr').removeClass("row_selected");
            $(this).addClass("row_selected");
        });

        oTable = $("#dashboardtable").dataTable({
            "oLanguage": {
                "sZeroRecords": "No records to display",
                 "sSearch": "Search"
            },
            //"sScrollY": "100%",
            "sScrollX": "100%",
		    "sScrollXInner": "150%",
		    "bScrollCollapse": false,
            "bSort": true,
            "bDestroy": true,
            "bPaginate": true,
            "bAutoWidth": false,
            "bProcessing": true,
            "bServerSide": true,
            "bJQueryUI": true,
             "bDeferRender": true,
            "sPaginationType": "full_numbers",
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": "../Serializer/DashboardSerializer.ashx?User=" + $("#txt_user").val(),
                    "data": aoData,
                    "success": fnCallback
                });
            },

//            "fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
//        /*
//         * Calculate the total market share for all browsers in this table (ie inc. outside
//         * the pagination)
//         */
//        var iTotalMarket = 0;
//        for ( var i=0 ; i<aaData.length ; i++ )
//        {
//            // alert(aaData[i]["Weight"]);
//            
//            // alert(aaData.length);
//            iTotalMarket += aaData[i]["Weight"]*1;
//        }
//        
//        /* Calculate the market share for browsers on this page */
//        var iPageMarket = 0;
//        for ( var i=iStart ; i<iEnd ; i++ )
//        {
//           // alert([aiDisplay[i]][3]);
//           
//            //iPageMarket += aaData[aiDisplay[i]][1]*1;

//           // alert(iPageMarket);
//        }

//        /* Modify the footer row to match what we want */
//        var nCells = nRow.getElementsByTagName('th');
//        nCells[1].innerHTML = parseInt(iTotalMarket);
//        },
            "aoColumns": [

            {
                "mData": "KPIAssignID2"
            },
            
            {
                "mData": "No"
            }, 
            
            {
                "mData": "Description"
            }, {
                "mData": "Weight"
            },
            {
                "mData": "Format"
            },
            {
            "mData": "UoMMax"
            },
            {
            "mData": "UoMMin"
            },
            
             {
                "mData": "Jan"
            }, {
                "mData": "Feb"
            }, {
                "mData": "Mar"
            }, {
                "mData": "Apr"
            }, {
                "mData": "May"
            }, {
                "mData": "Jun"
            }, {
                "mData": "Jul"
            }, {
                "mData": "Aug"
            }, {
                "mData": "Sep"
            }, {
                "mData": "Oct"
            }, {
                "mData": "Nov"
            }, {
                "mData": "Dec"
            }, {
                "mData": "Total"
            }, {
                "mData": "ScoreAchieved"
            }, {
                "mData": "KPIAssignID",
                "bVisible":false,
            }],
            "aoColumnDefs": [
            
            {
                "fnRender": function (oObj) {
                    return "<a  onclick=\"GraphicRender('" + oObj.aData["KPIAssignID"] + "', '" + oObj.aData["Description"] + "', '" + $("#txt_user").val() + "')\">" + oObj.aData["Description"] + "</a>";
                },
                "aTargets": [2]
            }, 

             {
                "fnRender": function (oObj) {
                    return "<a onclick=\"GraphicRender('" + oObj.aData["KPIAssignID"] + "', '" + oObj.aData["Description"] + "', '" + $("#txt_user").val() + "')\">" + "<img src='../images/detail.png' />" + "</a>";
                },
                "aTargets": [0]
            },

            
             {
                 "bVisible": false,
                 "aTargets": [0]
             },
            {
                "sClass": "center",
                "aTargets": [0,1,3,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
            }]
        });

                //mark selected row
        $('body').on("click", '#dashboardtable tbody tr', function () {
            $('#dashboardtable tbody tr').removeClass("row_selected");
            $(this).addClass("row_selected");
        });
        //--------------------end of mark selected row-----------------------------

        GetName($("#txt_user").val());

        DrawKPITable = function(EmployeeID)
        {
        
            oTable = $("#dashboardtable").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                     "sSearch": "Search"
                },
               // "sScrollY": "20%",
                "sScrollX": "100%",
		        "sScrollXInner": "150%",
		        "bScrollCollapse": false,
                "bSort": true,
                "bDestroy": true,
                "bPaginate": true,
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": "../Serializer/DashboardSerializer.ashx?User=" + EmployeeID,
                        "data": aoData,
                        "success": fnCallback
                    });
                },

//                "fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
//        /*
//         * Calculate the total market share for all browsers in this table (ie inc. outside
//         * the pagination)
//         */
//        var iTotalMarket = 0;
//        for ( var i=0 ; i<aaData.length ; i++ )
//        {
//            // alert(aaData[i]["Weight"]);
//            
//            // alert(aaData.length);
//            iTotalMarket += aaData[i]["Weight"]*1;
//        }
//        
//        /* Calculate the market share for browsers on this page */
//        var iPageMarket = 0;
//        for ( var i=iStart ; i<iEnd ; i++ )
//        {
//           // alert([aiDisplay[i]][3]);
//           
//            //iPageMarket += aaData[aiDisplay[i]][1]*1;

//           // alert(iPageMarket);
//        }

//        /* Modify the footer row to match what we want */
//        var nCells = nRow.getElementsByTagName('th');
//        nCells[4].innerHTML = parseInt(iTotalMarket);
//        },

                "aoColumns": [
                
                {
                "mData": "KPIAssignID2"
            },

                {
                    "mData": "No"
                }, {
                    "mData": "Description"
                }, {
                    "mData": "Weight"
                }, 
                {
                    "mData": "Format"
                },
                {
                    "mData": "UoMMax"
                },
                {
                    "mData": "UoMMin"
                },
                
                 {
                    "mData": "Jan"
                }, {
                    "mData": "Feb"
                }, {
                    "mData": "Mar"
                }, {
                    "mData": "Apr"
                }, {
                    "mData": "May"
                }, {
                    "mData": "Jun"
                }, {
                    "mData": "Jul"
                }, {
                    "mData": "Aug"
                }, {
                    "mData": "Sep"
                }, {
                    "mData": "Oct"
                }, {
                    "mData": "Nov"
                }, {
                    "mData": "Dec"
                }, {
                    "mData": "Total"
                }, {
                    "mData": "ScoreAchieved"
                }, {
                    "mData": "KPIAssignID",
                    "bVisible":false,
                }],
                "aoColumnDefs": [{
                    "fnRender": function (oObj) {
                        return "<a  onclick=\"GraphicRender('" + oObj.aData["KPIAssignID"] + "', '" + oObj.aData["Description"] + "','" + EmployeeID + "')\">" + oObj.aData["Description"] + "</a>";
                    },
                    "aTargets": [2]
                }, 

                 {
                "fnRender": function (oObj) {
                    return "<a onclick=\"GraphicRender('" + oObj.aData["KPIAssignID"] + "', '" + oObj.aData["Description"] + "', '" + $("#txt_user").val() + "')\">" + "<img src='../images/detail.png' />" + "</a>";
                },
                "aTargets": [0]
            },
                

            {
                "sClass": "center",
                "aTargets": [0,1,3,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
            }
            
            ,
             {
                 "bVisible": false,
                 "aTargets": [0]
             }
                
             ]
            });
        
            //mark selected row
            $('body').on("click", '#dashboardtable tbody tr', function () {
                $('#dashboardtable tbody tr').removeClass("row_selected");
                $(this).addClass("row_selected");
            });
            //--------------------end of mark selected row-----------------------------

            GetName(EmployeeID);
        }
    });


    function GraphicRender(KPIAssignID, Title, EmployeeID) {
        $.ajax({
            "dataType": 'json',
            "type": "GET",
            "url": "../Serializer/DashboardRealizationSerializer.ashx?User=" + EmployeeID + "&KPIAssign=" + KPIAssignID,
            "success": function (data) {
                $("#movement").show();

                $("#chartdiv").html('');

                var lineScore = ArrGraphSeries(data, 'Score');
                var lineMax = ArrGraphSeries(data, 'Max');
                var lineMin = ArrGraphSeries(data, 'Min');

                var plot1 = $.jqplot('chartdiv', [lineScore, lineMax, lineMin], {
                    title: Title,
                    axes: {
                        xaxis: {
                            renderer: $.jqplot.DateAxisRenderer,
                            tickOptions: {
                                formatString: '%b'
                            }
                        },
                        yaxis: {
                            tickOptions: {
                                formatString: '%.2f'
                            },
                            min: 0,
                            max: (200)
                        }
                    },
                    legend: {
                        show: true
                    },
                    series: [{
                        label: 'Score'
                    }, {
                        label: 'Max'
                    }, {
                        label: 'Min'
                    }],
                    highlighter: {
                        show: true,
                        sizeAdjust: 10
                    },
                    cursor: {
                        show: false
                    }
                });
            },
            "error": function(){
                $("#movement").hide();
                return false;
            }
        });
    }

    function ArrGraphSeries(data, mode) {
        var retVal = [];

        if (mode == 'Score') {
            for (i = 0; i < data.result.length; i++) {
                var x = [data.result[i].Dates.toString(), data.result[i].Score.toString()];
                retVal.push(x);
            }
        } else if (mode == 'Max') {
            for (i = 0; i < data.result.length; i++) {
                var x = [data.result[i].Dates.toString(), data.result[i].Max.toString()];
                retVal.push(x);
            }
        } else if (mode == 'Min') {
            for (i = 0; i < data.result.length; i++) {
                var x = [data.result[i].Dates.toString(), data.result[i].Min.toString()];
                retVal.push(x);
            }
        }

        return retVal;
    }

    GetName = function (EmployeeID) {
        $.ajax({
            "url": "../Serializer/DashboardSerializer.ashx?User=" + EmployeeID,
            success: function (data) {
                $("#lbl_employeename").text(': ' + data.EmployeeName);
                $("#lblTotalWeight").text(data.TotalWeight);
                $("#lblTotalScore").text(data.TotalScore);
            }
        });
    }
    </script>
    <%--<style>
        .fg-toolbar
        {
            display: none;
        }
    </style>--%>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
   
    <div class="customPageTitle">
        Employee List</div>
    <br />
  
    <div class="ui-widget-content">
        <table cellpadding="0" cellspacing="0" class="display" id="EmployeeTable">
            <thead>
                <tr>
                    <th>
                    </th>
                    <th>
                        No
                    </th>
                    <th>
                        Employee Name
                    </th>
                    <th>
                        Sub Branch
                    </th>
                    <th>
                        Department
                    </th>
                    <th>
                        Section
                    </th>
                    <th>
                        Sub Section
                    </th>
                    <th>
                        Job Position
                    </th>
                    <th>
                        Job Title
                    </th>
                    <th>
                        is Active
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <%-- </div>--%>
    <br />
    <div class="customPageTitle">
        Current KPI Status&nbsp;<label id="lbl_employeename"></label></div>
    <br />
    <div class="ui-widget-content">
        <%-- <div style="border: 1px solid Black;">--%>
        <table cellpadding="0" cellspacing="0" class="display" id="dashboardtable">
            <thead>
                <tr>
                    <th>
                    </th>
                    <th>
                        No
                    </th>
                    <th>
                        KPI
                    </th>
                    <th>
                        Weight
                    </th>
                    <th>
                        Format
                    </th>
                    <th>
                        UoM Max.
                    </th>
                    <th>
                        UoM Min.
                    </th>
                    <th>
                        Jan
                    </th>
                    <th>
                        Feb
                    </th>
                    <th>
                        Mar
                    </th>
                    <th>
                        Apr
                    </th>
                    <th>
                        May
                    </th>
                    <th>
                        Jun
                    </th>
                    <th>
                        Jul
                    </th>
                    <th>
                        Aug
                    </th>
                    <th>
                        Sep
                    </th>
                    <th>
                        Oct
                    </th>
                    <th>
                        Nov
                    </th>
                    <th>
                        Dec
                    </th>
                    <th>
                        Total
                    </th>
                    <th>
                        Score
                    </th>
                    <th>
                        KPIAssignID
                    </th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>
                        Total
                    </th>
                    <th>
                    </th>
                </tr>
            </tfoot>
            <tbody>
            </tbody>
        </table>
        <%--</div>--%>
    </div>
    <br />
    <b>Total Weight :&nbsp;&nbsp;
        <label id="lblTotalWeight">
        </label>
    </b>
    <br />
    <b>Total Score &nbsp; :&nbsp;&nbsp;
        <label id="lblTotalScore">
        </label>
    </b>
    <br />
    <%--<div id="movement">
        <div class="customPageTitle">
            Current KPI Score Movement</div>
        <br />
        <div id="chartdiv" style="height: 400px; width: 1000px;">
        </div>
    </div>--%>
    <%-- </div>
    </form>--%>
</asp:Content>
